<template>
	<view class="home">
		<view class="operation-area">
			<!-- 事项输入 -->
			<view class="input-group">
				<text class="label">事项:</text>
				<input 
					v-model="matter"
					class="input"
					placeholder="这里输入摆盘事项"
					@input="handleMatterInput"
				/>
			</view>
			
			<!-- 时间选择器部分 -->
			<view class="time-selector">
				<view class="picker-group">
					<picker 
						mode="date" 
						:value="dateStr"
						@change="handleDateChange"
					>
						<view class="picker">
							日期：{{ dateStr }}
						</view>
					</picker>
					
					<picker 
						mode="time" 
						:value="timeStr"
						@change="handleTimeChange"
					>
						<view class="picker">
							时间：{{ timeStr }}
						</view>
					</picker>
				</view>
				
				<button 
					type="primary" 
					@click="submit"
					class="start-btn"
				>
					开始排盘
				</button>
			</view>
		</view>
		
		<!-- 历史列表 -->
		<view class="history-area">
			<history-list />
		</view>
	</view>
</template>

<script>
	//import导入
	import moment from '@/common/js/moment.min.js';
	import throttle from '@/common/js/throttle.js';
	import calendarFormatter from '@/common/js/js-calendar-converter.js';
	import Lunargz from '@/common/lunargz.js';
	import HistoryList from '@/components/qimen/HistoryList.vue'
	import { mapActions } from 'vuex'

	export default {
		components: {
			HistoryList
		},
		data() {
			return {
				model1: {
					home: {
						matters: '',
						currentdate: moment().format('YYYY-MM-DD HH:mm:ss')
					}
				},
				value_name: 'home',
				value1: Number(new Date()),
				currentdate: false,
				matter: '',
				// 新增时间选择器相关数据
				dateStr: '',
				timeStr: ''
			}
		},
		created() {
			this.initTime()
		},
		rules: {
			'home.matters': [{
				type: 'string',
				trigger: ['blur', 'change']
			}]
		},
		methods: {
			...mapActions('qimen', ['updateMatter', 'updateCurrentTime']),
			
			// 时间选择器相关方法
			initTime() {
				const now = new Date()
				this.dateStr = this.formatDate(now)
				this.timeStr = this.formatTime(now)
				this.model1.home.currentdate = moment(now).format('YYYY-MM-DD HH:mm:ss')
			},
			
			formatDate(date) {
				const year = date.getFullYear()
				const month = (date.getMonth() + 1).toString().padStart(2, '0')
				const day = date.getDate().toString().padStart(2, '0')
				return `${year}-${month}-${day}`
			},
			
			formatTime(date) {
				const hour = date.getHours().toString().padStart(2, '0')
				const minute = date.getMinutes().toString().padStart(2, '0')
				return `${hour}:${minute}`
			},
			
			handleDateChange(e) {
				this.dateStr = e.detail.value
				this.updateDateTime()
			},
			
			handleTimeChange(e) {
				this.timeStr = e.detail.value
				this.updateDateTime()
			},
			
			updateDateTime() {
				const [year, month, day] = this.dateStr.split('-').map(Number)
				const [hour, minute] = this.timeStr.split(':').map(Number)
				const date = new Date(year, month - 1, day, hour, minute)
				this.model1.home.currentdate = moment(date).format('YYYY-MM-DD HH:mm:ss')
				this.updateCurrentTime(date)
			},
			
			handleMatterInput(e) {
				this.matter = e.detail.value
				this.updateMatter(this.matter)
			},
			
			submit() {
				// var currenttime = moment().format('YYYY-MM-DD HH:mm:ss')
				var currenttime = this.model1.home.currentdate;
				// var currenttime = '2024-8-6'
				var lu_date0 = calendarFormatter.solar2lunar()
				// var lu_date1 = Lunargz.solar2lunar();
				let lu_data = new Lunargz(currenttime); //传入新历时间参数
				// let lu_data = new Lunargz('2024-8-6');//传入新历时间参数
				
				//获取年的干支
				let ndry = lu_data.gz[0];
				//获取月的干支
				let ydry = lu_data.gz[1];
				//获取日的干支
				let rdry = lu_data.gz[2];
				//获取时的干支
				let sdry = lu_data.gz[3];
				//获取本月第一个节气
				let jqdate1 = lu_data.jq[0].time;
				let jqdate2 = lu_data.jq[1].time;
				//比较当前时间与两个节气的时间大小
				let jqdate;
				let get_jq = lu_data.jq;
				let lastjq;
				lastjq = get_jq[1].jq;
				// console.log("lastjq:"+lastjq)
				
				//当前时间与第一个节气相差的天数
				let startDate = moment(jqdate1).format('YYYY-MM-DD');
				// console.log("startDate:" + startDate);
				let endDate = moment(currenttime).format('YYYY-MM-DD');
				// console.log("endDate:" + endDate);
				let cdaynum = moment(endDate).diff(startDate, 'day');
				// console.log("cdaynum:" + cdaynum);
				
				if (currenttime === jqdate2.substring(0, 8)) {
					lastjq = get_jq[1].jq;
					jqdate = lu_data.jq[1].time;
					cdaynum = 0
				} else {
					if (cdaynum > 15) {
						lastjq = throttle.getlastinnings(get_jq[0].jq);
						cdaynum = cdaynum - 16;
						jqdate = moment(lu_data.jq[0].time).add(16, 'days').format('YYYY-MM-DD');
					} else {
						lastjq = get_jq[0].jq;
						jqdate = lu_data.jq[0].time;
					}
				}
				var name = '身前身后事：';
				var matters = this.model1.home.matters;
				var time = this.model1.home.currentdate;
				// if(lu_date0.Term !== ''&& lu_date0.Term !== null && lu_date0.Term !== undefined) {
				// 	lu_date.Term = lu_date0.Term;
				// }
				// console.log("jqdate:" + jqdate)
				// console.log("lu_data:" + lu_data);
				// console.log("lastjq:" + lastjq)

				//年月日时空亡
				let NKongwang = throttle.getEmpdeath(lu_data.gz[0])
				let YKongwang = throttle.getEmpdeath(lu_data.gz[1])
				let RKongwang = throttle.getEmpdeath(lu_data.gz[2])
				let SKongwang = throttle.getEmpdeath(lu_data.gz[3])

				// 带参数
				uni.$u.route('/pages/plate/plate', {
					name: name,
					matters: matters,
					time: time,
					ndry,
					ydry,
					rdry,
					sdry,
					lastjq,
					jqdate,
					cdaynum,
					NKongwang,
					YKongwang,
					RKongwang,
					SKongwang
				});
			},
			reset() {
				this.model1.home.matters = '';
				this.model1.home.currentdate = moment().format('YYYY-MM-DD HH:mm:ss');
			},
			dayConfirm(e) {
				this.currentdate = false
				this.model1.home.currentdate = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
				this.$refs.form1.validateField('home.currentdate')
			},
			dayClose() {
				this.currentdate = false
				this.$refs.form1.validateField('home.currentdate')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		
		.operation-area {
			padding: 20rpx;
			background-color: #fff;
			box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
			
			.input-group {
				display: flex;
				align-items: center;
				padding: 20rpx;
				background-color: #fff;
				border-radius: 8rpx;
				margin-bottom: 20rpx;
				border: 1px solid #eee;
				
				.label {
					width: 120rpx;
					color: #dfb06e;
					font-size: 28rpx;
				}
				
				.input {
					flex: 1;
					height: 60rpx;
					padding: 0 20rpx;
					font-size: 28rpx;
				}
			}
			
			.time-selector {
				padding: 20rpx;
				
				.picker-group {
					display: flex;
					gap: 20rpx;
					margin-bottom: 20rpx;
					
					.picker {
						flex: 1;
						background-color: #f8f8f8;
						padding: 20rpx;
						border-radius: 8rpx;
						text-align: center;
					}
				}
				
				.start-btn {
					width: 100%;
					height: 80rpx;
					line-height: 80rpx;
					margin-top: 20rpx;
				}
			}
		}
		
		.history-area {
			flex: 1;
			overflow-y: auto;
			padding: 20rpx;
			background-color: #f8f8f8;
		}
	}
</style>